import type { TrainPlanType } from '../interface'
import { useLocalObservable, useObserver } from 'mobx-react'
import { history } from 'umi'
import { approveTrainPlan, fetchTrainPlanDetail, rejectTrainPlan } from '../api'
import { useEffect } from 'react'
import { rpxToPx } from '@/utils/share'
import { Dialog, TextArea, Toast } from 'antd-mobile'
import useRoleCheck from '../hooks/useRoleCheck'
import Btn from '@/components/Global/Btn'
import Picture from '@/components/Global/Picture'
import styles from './index.module.less'
import NavBar from '@/components/Global/NavBar'

/** 培训计划详情 */
const TrainPlanDetail = () => {
    const queryParams = history.location.query as { id: string }

    const store = useLocalObservable(() => ({
        /** 培训计划详细信息 */
        detail: {} as Partial<TrainPlanType.Detail>,

        async fetchTrainPlanDetailToStore() {
            const data = await fetchTrainPlanDetail(Number(queryParams.id))
            if (!data) return

            store.detail = data
        },
    }))

    const { checkResult, checkState } = useRoleCheck({ item: store.detail })

    useEffect(() => {
        const fetch = async () => {
            const tostShow = Toast.show({
                icon: 'loading',
                content: '加载中...',
                duration: 0,
            })
            await store.fetchTrainPlanDetailToStore()
            tostShow.close()
        }

        fetch()
    }, [store])

    /** 通过 */
    const onApprove = async () => {
        try {
            await approveTrainPlan(Number(queryParams.id))

            Dialog.alert({
                title: '计划审核确认',
                content: (
                    <div style={{ textAlign: 'center', color: '#666' }}>
                        已明确当地疫情防控工作要求，并同意开展此次培训
                    </div>
                ),
                confirmText: '已知晓 ',
                onConfirm: () => {
                    history.push('/train?tab=trainPlan')
                },
            })
        } catch (error) {}
    }

    /** 驳回 */
    const onReject = async () => {
        // 不通过意见
        let reason = ''

        Dialog.confirm({
            title: '不通过意见',
            confirmText: '提交',
            content: (
                <>
                    <TextArea
                        style={{
                            border: '1px solid #ddd',
                            borderRadius: rpxToPx(8),
                            padding: rpxToPx(24),
                            fontSize: rpxToPx(30),
                        }}
                        placeholder="请输入内容"
                        showCount
                        maxLength={50}
                        rows={4}
                        onChange={v => (reason = v)}
                    />
                    <span style={{ fontSize: rpxToPx(26), color: '#999' }}>文字要求不超过50字</span>
                </>
            ),
            onConfirm: async () => {
                try {
                    await rejectTrainPlan(Number(queryParams.id), reason)
                    Toast.show({ icon: 'success', content: '操作成功' })
                    history.push('/train?tab=trainPlan')
                } catch (error) {}
            },
        })
    }

    return useObserver(() => {
        return (
            <>
                <NavBar title="培训计划详情" />

                <div className={styles.page}>
                    <div className={styles.plate}>
                        <div className={styles.plate_header}>{store.detail.name}</div>

                        <div className={styles.plate_content}>
                            <div className={styles.plate_content_field}>
                                <label>填表单位</label> <span>{store.detail.company_name}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>地区</label> <span>{store.detail.region}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>联系人</label> <span>{store.detail.realname}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>联系电话</label> <span>{store.detail.phone}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>计划年份</label>
                                <span>
                                    {store.detail.year}({store.detail.division_name})
                                </span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>盖章件</label>
                                <span>
                                    <Picture
                                        image={{ fit: 'contain' }}
                                        height={80}
                                        width={80}
                                        src={store.detail.image}
                                    />
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* 开班信息 */}
                    <div className={styles.plate}>
                        <div className={styles.plate_header}>开班信息</div>

                        {(store.detail.subdata ?? []).map(item => {
                            return (
                                <div className={styles.plate_content} key={item.id}>
                                    <div className={styles.plate_content_field}>
                                        <label>类别</label> <span>{item.name}</span>
                                    </div>
                                    <div className={styles.plate_content_field}>
                                        <label>单位</label> <span>{item.company_name}</span>
                                    </div>
                                    <div className={styles.plate_content_field}>
                                        <label>地区</label> <span>{item.region}</span>
                                    </div>
                                    <div className={styles.plate_content_field}>
                                        <label>班次</label> <span>{item.group_number}</span>
                                    </div>
                                    <div className={styles.plate_content_field}>
                                        <label>培训人数</label> <span>{item.plan_number}</span>
                                    </div>
                                    <div className={styles.plate_content_field}>
                                        <label>培训月份</label>{' '}
                                        <span>{item.plan_time.join('-')}</span>
                                    </div>
                                </div>
                            )
                        })}
                    </div>

                    {/* 审核结果 */}
                    {checkState.check !== 0 && (
                        <div className={styles.plate}>
                            <div className={styles.plate_header}>审核结果</div>

                            <div className={styles.plate_content}>
                                <div className={styles.plate_content_field}>
                                    <label>审核结果</label>
                                    <span style={{ color: checkResult.color16 }}>
                                        {checkResult.text}
                                    </span>
                                </div>
                                <div className={styles.plate_content_field}>
                                    <label>审核时间</label> <span>{checkState.time}</span>
                                </div>
                                <div className={styles.plate_content_field}>
                                    <label>审核意见</label> <span>{checkState.reason}</span>
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                {/* 审核 */}
                {checkState.check === 0 && (
                    <div className={styles.footerWrap}>
                        <div className={styles.footer}>
                            <Btn className={styles.footer_reject} task={onReject}>
                                不通过
                            </Btn>
                            <Btn className={styles.footer_approve} task={onApprove}>
                                通过
                            </Btn>
                        </div>
                    </div>
                )}
            </>
        )
    })
}

export default TrainPlanDetail
